<template>
  <div class="pay-popup">
    <van-popup :value="value"
               @input="val => this.$emit('input', val)"
               closeable
               close-icon="close"
               close-icon-position="top-left"
               position="bottom"
               :close-on-click-overlay="false"
               :style="{ height: '6.5rem' }">
      <div class="pay-popup-content">
        <div class="pay-popup-price">¥<span>58.00</span></div>
        <div class="pay-popup-type">
          <li>支付方式</li>
          <li @click="payMethodShow=true">{{ payMethodData[payMethodActive] }}
            <van-icon name="arrow" />
          </li>
        </div>
        <van-button :loading="payLoading"
                    @click="paySure">确认支付</van-button>
      </div>
    </van-popup>
    <van-popup v-model="payMethodShow"
               closeable
               close-icon="arrow-left"
               close-icon-position="top-left"
               position="bottom"
               :overlay="false"
               :style="{ height: '6.5rem' }">
      <div class="pay-method">
        <span class="pay-method-title">支付方式</span>
        <div class="pay-method-content">
          <li v-for="(item,i) in payMethodData"
              :key="i"
              @click="choosePayMethod(i)">
            <span>{{ item }}</span>
            <van-icon v-show="payMethodActive==i"
                      name="success" />
          </li>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import preventBack from '@/mixins/preventBack'
export default {
  data () {
    return {
      payMethodShow: false,
      payLoading: false, // 支付按钮loading
      payMethodData: ['余额', '微信', '支付宝'],
      payMethodActive: 0
    };
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  mixins: [preventBack],
  created () {
  },
  methods: {
    paySure () {
      this.payLoading = true;
      setTimeout(() => {
        this.payLoading = false;
        this.$emit('paySuccess')
      }, 1500);
    },
    choosePayMethod (index) {
      this.payMethodActive = index;
      this.payMethodShow = false;
    },
    onBrowserBack () {
      // 这里写点击返回键时候的事件
      // 比如判断需求执行back()或者go(-2)或者PopupShow=false隐藏弹框
      if (this.payMethodShow == true) {
        history.pushState(null, null, document.URL)
        this.payMethodShow = false
      }
      else if (this.value == true) {
        history.pushState(null, null, document.URL)
        this.$emit('input', false)
      } else {
        this.$router.go(-1)
      }


    },
  }
}

</script>

<style lang='scss'>
.pay-popup {
  .pay-popup-content {
    @include top-page;
    box-sizing: border-box;
    padding: 0 0.25rem;
    .pay-popup-price {
      height: 50%;
      width: 100%;
      box-sizing: border-box;
      padding-top: 0.8rem;
      border-bottom: 1px solid #eeeeee;
      @include flex-center;
      font-weight: 600;
      color: #000000;
      font-size: 0.34rem;
      span {
        font-size: 0.6rem;
      }
    }
    .pay-popup-type {
      height: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.3rem;
      color: #131415;
      li {
        &:last-child {
          display: flex;
          align-items: center;
          .van-icon {
            margin-left: 0.15rem;
          }
        }
      }
    }
    .van-button {
      border-radius: 0.15rem;
      border: none;
      background: #e85014;
      height: 0.7rem;
      color: #ffffff;
    }
  }
  .van-popup__close-icon--top-left {
    top: 0.44rem;
  }
  .pay-method {
    @extend .pay-popup-content;
    position: relative;
    .pay-method-title {
      position: absolute;
      top: 0.44rem;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0.34rem;
      font-weight: 600;
      color: #020202;
    }
    .pay-method-content {
      width: 100%;
      height: 80%;
      margin-top: 20%;
      li {
        height: 0.7rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0.5rem;
        border-bottom: 1px solid #eeeeee;
        font-size: 0.3rem;
        color: #131415;
      }
    }
  }
}
</style>